<template>
  <div class="share ">
    <div class="container">
      <p class="title">
        <span></span>
        <span>微信昵称</span>
      </p>
      <div class="box" id="experience">
        <ul class="scroller">
          <li>体验文字感悟体验文字感悟体验文字感悟体验文字感悟体验文字感悟体验文字感悟体验文字感悟体验文字感悟体验文字感悟体验文字感悟体验文字感悟</li>
          <li><img :src="hanchao" alt=""></li>
          <li>体验文字感悟体验文字感悟体验文字感悟体验文字感悟体验文字感悟体验文字感悟体验文字感悟体验文字感悟体验文字感悟体验文字感悟体验文字感悟</li>
          <li><img :src="hanchao" alt=""></li>
          <li>体验文字感悟体验文字感悟体验文字感悟体验文字感悟体验文字感悟体验文字感悟体验文字感悟体验文字感悟体验文字感悟体验文字感悟体验文字感悟</li>
          <li><img :src="hanchao" alt=""></li>
          <li>体验文字感悟体验文字感悟体验文字感悟体验文字感悟体验文字感悟体验文字感悟体验文字感悟体验文字感悟体验文字感悟体验文字感悟体验文字感悟</li>
          <li><img :src="hanchao" alt=""></li>
          <li>体验文字感悟体验文字感悟体验文字感悟体验文字感悟体验文字感悟体验文字感悟体验文字感悟体验文字感悟体验文字感悟体验文字感悟体验文字感悟</li>
          <li><img :src="hanchao" alt=""></li>
          <li>体验文字感悟体验文字感悟体验文字感悟体验文字感悟体验文字感悟体验文字感悟体验文字感悟体验文字感悟体验文字感悟体验文字感悟体验文字感悟</li>
          <li><img :src="meizhuangcode" alt=""></li>
        </ul>
      </div>
      <p class="discuss">
        <watchs></watchs>
        <likes></likes>
        <span class="blank"></span>
        <share></share>
      </p>
    </div>
    <div class="wechat"> <img src="../../assets/img/wecode.png" alt=""></div>
  </div>
</template>
<script>
import Watchs from "@/components/tips/Watchs";
import Likes from "@/components/tips/Likes";
import Share from "@/components/tips/Share";
import "@/assets/lib/iscroll-lite.js";
// const path = require("path");


export default {
  data() {
    return {
      key: "111",
      hanchao: require('@/assets/img/meicode.png'),
      meizhuangcode: require('@/assets/img/meicode.png')
    };
  },
  props: [],
  mounted() {
    this.$nextTick(() => {
      setTimeout(() => {
        new iScroll("experience", {
          vScroll: true,
          hScroll: false, //水平滚动
          hScrollbar: false,
          checkDOMChanges: true,
          hideScrollbar: true
        });
      }, 500)
    });
  },
  components: { Watchs, Likes, Share },
  methods: {
    name() { }
  }
};
</script>
<style lang="less" scoped>
.share {
  padding: 20px 18px 0;
  background: #ff82b5;
  min-height: 100%;
  .container {
    width: 100%;
    height: 840px;
    margin: 0 auto;
    background: url("../../assets/img/panel.png") no-repeat;
    background-size: cover;
    > p.title {
      margin-left: 10px;
      margin-bottom: 10px;
      padding-top: 20px;
      padding-bottom: 10px;
      border-bottom: 1px solid #b5b5b5;
      text-align: left;
      span {
        margin: 0 10px;
        display: inline-block;
        vertical-align: middle;
      }
      span:first-child {
        width: 60px;
        height: 60px;
        background: #ddd;
      }
    }
    .box {
      height: 600px;
      overflow: hidden;
    }
    ul {
      padding: 0 15px;
      li {
        line-height: 1.5em;
        img {
          width: 50%;
        }
      }
    }
    .discuss {
      margin-top: 20px;
      display: flex;
      display: -webkit-flex;
      justify-content: space-around;
      span {
        margin: 0 20px;
      }
      .blank {
        margin: 0 auto;
      }
      span:last-child {
        margin-right: 60px;
      }
    }
  }
  .wechat {
    width: 100%;
    > img {
      margin-top: 15px;
      width: 575px;
      height: 191px;
    }
  }
}
</style>
